<template>
  <div class="app-container">
    <el-tabs v-model="activeName">
      <el-tab-pane label="自动归档" name="first">
        <wise-crud ref="wise-crud" :urls="urls" :fields="fields" :handle="handle" :filters="filters">
          <template v-slot:handle="slotProps">
            <el-button
              v-if="slotProps.row.qualifiedStatus !== 2"
              type="danger"
              size="small"
              class="activeBtn"
              round
              @click.native.prevent="removeHandle(slotProps.row)"
            >
              删除
            </el-button>
            <el-button type="info" size="small" class="activeBtn" round @click.native.prevent="viewHandle(slotProps.row)">查看</el-button>
          </template>
        </wise-crud>
      </el-tab-pane>
      <el-tab-pane label="手动归档" name="second">
        <Artificial v-if="activeName === 'second'" :type="1" />
      </el-tab-pane>
    </el-tabs>

    <el-dialog title="查看" :visible.sync="dialog" width="40%">
      <table id="printMe" border="1" width="95%" style="border-collapse: collapse; margin: auto">
        <tr>
          <td colspan="2">检测</td>
        </tr>
        <tr>
          <td>标题</td>
          <td>{{ obj.title }}</td>
        </tr>
        <tr>
          <td>时间</td>
          <td>{{ obj.ct | dateFormat("YYYY-MM-DD HH:mm:ss") }}</td>
        </tr>
        <tr>
          <td>检测单位</td>
          <td>{{ obj.monitorUnitInfo ? obj.monitorUnitInfo.name : "" }}</td>
        </tr>
        <tr>
          <td>检测人</td>
          <td>{{ obj.userInfo.username }}</td>
        </tr>

        <tr>
          <td>描述</td>
          <td>{{ obj.content }}</td>
        </tr>
        <tr>
          <td>状态</td>
          <!-- <td>{{ obj.qualifiedStatus === 2 ? "合格" : "/不合格" }}</td> -->
          <td v-if="obj.qualifiedStatus === 0">待确认</td>
          <td v-if="obj.qualifiedStatus === 1">不合格</td>
          <td v-if="obj.qualifiedStatus === 2">合格</td>
        </tr>
        <tr>
          <td>审核人</td>
          <td>{{ obj.confirmUserInfo ? obj.confirmUserInfo.username : "" }}</td>
        </tr>
        <tr v-if="obj.image">
          <td>图片</td>
          <td>
            <el-image
              v-for="(img, i) in imgList"
              v-if="imgList.length > 0"
              :key="i"
              class="image"
              fit="cover"
              alt="点击查看大图"
              :src="img | imgPath"
              style="margin-left: 10px"
              :preview-src-list="getSrcList(obj.image)"
            />
            <el-image
              v-if="imgList.length == 0"
              class="image"
              fit="cover"
              alt="点击查看大图"
              :src="obj.image | imgPath"
              :preview-src-list="getSrcList(obj.image)"
            />
          </td>
        </tr>
      </table>
      <span slot="footer" class="dialog-footer">
        <el-button @click="dialog = false">取 消</el-button>
        <el-button
          v-print="{
            id: 'printMe',
            popTitle: '',
          }"
          type="primary"
        >
          打 印
        </el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
import WiseCrud from '@/components/Crud/wiseCrud'
import { postHandle } from '@/api'
import { imgPath } from '@/filters'
import Artificial from '../components/Artificial.vue'
export default {
  name: 'WarehouseManage',
  components: {
    WiseCrud,
    Artificial
  },
  data() {
    return {
      activeName: 'first',
      imgList: [],
      handle: [],
      urls: {
        list: '/api/v1/welder-sbtx-second/detection-comb/list',
        show: '/api/v1/welder-sbtx-second/detection-comb/show/',
        delete: `/api/v1/welder-sbtx-second/detection/remove/`
      },
      fields: [
        {
          label: '标题',
          prop: 'title',
          type: 'text',
          use: ['table']
        },
        {
          label: '检测时间',
          prop: 'ct',
          type: 'datetime',
          format: 'YYYY-MM-DD HH:mm:ss',
          use: ['table']
        },
        {
          label: '检测人',
          prop: 'userInfo.username',
          type: 'text',
          use: ['table']
        },
        {
          label: '确认人员',
          prop: 'confirmUserInfo.username',
          type: 'text',
          use: ['table']
        },
        {
          label: '状态',
          type: 'render',
          use: ['table'],
          tableRender: (h, row, index) => {
            let textHtml = ''
            if (row.qualifiedStatus == 0) {
              textHtml = '待确认'
            } else if (row.qualifiedStatus == 1) {
              textHtml = '不合格'
            } else if (row.qualifiedStatus == 2) {
              textHtml = '合格'
            }
            return h('div', textHtml)
          }
        },
        {
          label: '操作',
          type: 'handle',
          use: ['table'],
          handle: [],
          tableWidth: 140
        }
      ],
      dialog: false,
      obj: {
        monitorUnitInfo: {
          name: null
        },
        qualifiedStatus: null,
        image: '',
        title: null,
        content: null,
        userInfo: {
          username: null
        },
        confirmUserInfo: {
          username: null
        }
      }
    }
  },
  computed: {
    spaceId() {
      return this.$store.getters.spaceId
    },
    filters() {
      return [
        {
          field: 'spaceId',
          operator: 'EQUALS',
          value: this.spaceId
        },
        {
          field: 'type',
          operator: 'EQUALS',
          value: 1
        }
      ]
    }
  },
  methods: {
    viewHandle({ id }) {
      this.getObjectId(id)
      this.dialog = true
    },
    getObjectId(id) {
      postHandle(this.urls.show + id).then(res => {
        this.obj = res.result
        this.imgList = []
        let a = this.obj.image.match(/;/g)
        if (a != null) {
          let b = res.result.image.split(';')
          b.length = b.length - 1
          for (let i in b) {
            this.imgList.push(b[i])
          }
        }
      })
    },
    getSrcList(str) {
      let arr = []
      if (str) {
        arr = str.split(';')
      }
      return arr.map(item => imgPath(item))
    },
    removeHandle({ id }) {
      this.$confirm('此操作将删除该数据, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      })
        .then(() => {
          postHandle(this.urls.delete + id).then(res => {
            this.$message({
              type: 'success',
              message: '删除成功!'
            })
            this.$refs['wise-crud'].handleSearch(0)
          })
        })
        .catch(() => {
          this.$message({
            type: 'info',
            message: '已取消删除'
          })
        })
    }
  }
}
</script>

<style lang="less" scoped>
table {
  text-align: center;

  td {
    padding: 20px 0;
  }
}

.image {
  width: 100px;
  height: 100px;
  margin-right: 10px;
}
</style>
